import React, { Component, createRef } from 'react';
import '@/assets/styles/login.css'
import { LockOutlined, UserOutlined, SafetyCertificateOutlined } from '@ant-design/icons';
import { withRouter } from 'react-router-dom'
import { Card } from 'antd'
import { Form, Input, Button, Toast } from 'antd-mobile'
// 导入封装好的验证码组件
import Captcha from '../components/Captcha'
// 导入网络请求及api
import url from '../config/url';
import req from '../http/req';
class PasswdLogin extends Component {
    capRef = createRef()//ref对象初始化
    formRef = createRef()//表单对象初始化实例
    state = {
        key: ''
    }
    render() {
        return (
            <div className="container">
                <Card className="card">
            <Form
                name="normal_login"
                className="login-form"
                onFinish={this.onFinish}
                ref={this.formRef}
            >
                <Form.Item
                    name="username"
                    rules={[{ required: true, message: '请输入用户名!' }]}
                >
                    <Input
                        prefix={<UserOutlined />}
                        placeholder="用户名"
                        size='large'
                    />
                </Form.Item>
                <Form.Item
                    name="password"
                    rules={[{ required: true, message: '请输入密码!' }]}
                >
                    <Input
                        prefix={<LockOutlined />}
                        type="password"
                        placeholder="密码"
                        size='large'
                    />
                </Form.Item>

                <Form.Item
                    name="captcha"
                    rules={[{ required: true, message: '请输入验证码!' }]}
                >
                    <Input
                        prefix={<SafetyCertificateOutlined />}
                        type="text"
                        placeholder="验证码"
                        size='large'
                    />
                </Form.Item>
                <Form.Item>
                    <Captcha setKey={this.setKey} h={40} ref={this.capRef} />
                </Form.Item>
                <Form.Item>
                    <Button
                        type="submit"
                        color='primary'
                        className="login-form-button"
                        size='large'
                        block
                    >
                        登录
                    </Button>
                </Form.Item>
            </Form >
            </Card>
            </div>
        );
    }
    setKey = (key) => {
        this.setState({ key })
    }
    onFinish = async (values) => {
        values.key = this.state.key
        req.post(url.PostUser, values).then(res => {
            if (res.data.errNo === 0) {
                Toast.show({
                    icon: 'success',
                    content: '登录成功',
                    duration: 1000,
                })
                this.props.history.replace('/dashboard/welcome')


            } else {
                Toast.show({
                    icon: 'fail',
                    duration: 1000,
                    content: '登录失败',
                })
                this.capRef.current.loadCap()
                // 可选 清空表单
                this.formRef.current.setFieldsValue({
                    username: '',
                    password: '',
                    captcha: ''
                })


            }
        })
    };

};


export default withRouter(PasswdLogin);
